<template>
    <div class="dashboard-container">
        <!-- github角标 -->
        <github-corner class="github-corner" />
        <el-card shadow="never">
            <el-row justify="space-between">
                <el-col :span="18" :xs="24">
                    <div class="flex h-full items-center">
                        <img
                            class="w-20 h-20 mr-5 rounded-full"
                            :src="
                                userStore.user.avatar +
                                '?imageView2/1/w/80/h/80'
                            "
                        />
                        <div>
                            <p>{{ greetings }}</p>
                            <p class="text-sm text-gray">
                                今日天气晴朗，气温在15℃至25℃之间，东南风。
                            </p>
                        </div>
                    </div>
                </el-col>
                <el-col :span="6" :xs="24">
                    <div class="flex h-full items-center justify-around">
                        <el-statistic
                            v-for="item in statisticData"
                            :key="item.key"
                            :value="item.value"
                        >
                            <template #title>
                                <div class="flex items-center">
                                    <svg-icon
                                        :icon-class="item.iconClass"
                                        size="20px"
                                    />
                                    <span class="text-[16px] ml-1">{{
                                        item.title
                                    }}</span>
                                </div>
                            </template>
                            <template v-if="item.suffix" #suffix>/100</template>
                        </el-statistic>
                    </div>
                </el-col>
            </el-row>
        </el-card>
        <!-- 数据卡片 -->
        <el-row :gutter="10" class="mt-3">
            <el-col
                :xs="24"
                :sm="12"
                :lg="6"
                v-for="(item, index) in cardData"
                :key="index"
            >
                <el-card shadow="never">
                    <template #header>
                        <div class="flex items-center justify-between">
                            <span
                                class="text-[var(--el-text-color-secondary)]"
                                >{{ item.title }}</span
                            >
                            <el-tag :type="item.tagType">
                                {{ item.tagText }}
                            </el-tag>
                        </div>
                    </template>

                    <div class="flex items-center justify-between mt-5">
                        <div class="text-lg text-right">
                            {{ Math.round(item.count) }}
                        </div>
                        <svg-icon :icon-class="item.iconClass" size="2em" />
                    </div>

                    <div
                        class="flex items-center justify-between mt-5 text-sm text-[var(--el-text-color-secondary)]"
                    >
                        <span> {{ item.dataDesc }} </span>
                        <span> {{ Math.round(item.count * 15) }} </span>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <!-- Echarts 图表 -->
        <el-row :gutter="10" class="mt-3">
            <el-col
                :xs="24"
                :sm="12"
                :lg="8"
                class="mb-2"
                v-for="item in chartData"
                :key="item"
            >
                <component
                    :is="chartComponent(item)"
                    :id="item"
                    height="400px"
                    width="100%"
                    class="bg-[var(--el-bg-color-overlay)]"
                />
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts">
import { useUserStore } from '@/store/modules/user'
import { useTransition, TransitionPresets } from '@vueuse/core'
import type { EpPropMergeType } from 'element-plus/es/utils/vue/props/types'
// interface
interface CardProp {
    title: string
    tagType: EpPropMergeType<
        StringConstructor,
        'primary' | 'success' | 'info' | 'warning' | 'danger',
        unknown
    >
    tagText: string
    count: any
    dataDesc: string
    iconClass: string
}
// store
const userStore = useUserStore()
// state
// 图表数据
const chartData = ref(['BarChart', 'PieChart', 'RadarChart'])

const date: Date = new Date()
const duration = 5000

// 销售额
const amount = ref(0)
const amountOutput = useTransition(amount, {
    duration: duration,
    transition: TransitionPresets.easeOutExpo,
})
amount.value = 2000

// 访客数
const visitCount = ref(0)
const visitCountOutput = useTransition(visitCount, {
    duration: duration,
    transition: TransitionPresets.easeOutExpo,
})
visitCount.value = 2000

// IP数
const dauCount = ref(0)
const dauCountOutput = useTransition(dauCount, {
    duration: duration,
    transition: TransitionPresets.easeOutExpo,
})
dauCount.value = 2000

// 订单量
const orderCount = ref(0)
const orderCountOutput = useTransition(orderCount, {
    duration: duration,
    transition: TransitionPresets.easeOutExpo,
})
orderCount.value = 2000
// 卡片数量

const cardData = ref<CardProp[]>([
    {
        title: '访客数',
        tagType: 'success',
        tagText: '日',
        count: visitCountOutput,
        dataDesc: '总访客数',
        iconClass: 'visit',
    },
    {
        title: 'IP数',
        tagType: 'success',
        tagText: '日',
        count: dauCountOutput,
        dataDesc: '总IP数',
        iconClass: 'ip',
    },
    {
        title: '销售额',
        tagType: 'primary',
        tagText: '月',
        count: amountOutput,
        dataDesc: '总IP数',
        iconClass: 'money',
    },
    {
        title: '订单量',
        tagType: 'danger',
        tagText: '季',
        count: orderCountOutput,
        dataDesc: '总订单量',
        iconClass: 'order',
    },
])
// 右上角数量
const statisticData = ref([
    {
        value: 99,
        iconClass: 'message',
        title: '消息',
        key: 'message',
    },
    {
        value: 50,
        iconClass: 'todolist',
        title: '待办',
        suffix: '/100',
        key: 'upcoming',
    },
    {
        value: 10,
        iconClass: 'project',
        title: '项目',
        key: 'project',
    },
])
// computed
const greetings = computed(() => {
    const hours = date.getHours()
    if (hours >= 6 && hours < 8) {
        return '晨起披衣出草堂，轩窗已自喜微凉🌅！'
    } else if (hours >= 8 && hours < 12) {
        return '上午好，' + userStore.user.nickname + '！'
    } else if (hours >= 12 && hours < 18) {
        return '下午好，' + userStore.user.nickname + '！'
    } else if (hours >= 18 && hours < 24) {
        return '晚上好，' + userStore.user.nickname + '！'
    } else {
        return '偷偷向银河要了一把碎星，只等你闭上眼睛撒入你的梦中，晚安🌛！'
    }
})
// action
// 图表数据
const chartComponent = (item: string) => {
    return defineAsyncComponent(() => import(`./components/${item}.vue`))
}
</script>

<style lang="scss" scoped>
.dashboard-container {
    position: relative;
    padding: 24px;

    .user-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }

    .github-corner {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1;
        border: 0;
    }

    .data-box {
        display: flex;
        justify-content: space-between;
        padding: 20px;
        font-weight: bold;
        color: var(--el-text-color-regular);
        background: var(--el-bg-color-overlay);
        border-color: var(--el-border-color);
        box-shadow: var(--el-box-shadow-dark);
    }

    .svg-icon {
        fill: currentcolor !important;
    }
}
</style>
